<template>
	<view class="container">
		<view class="header">
			<image class="avatar" src="https://haipinche-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220725/27d1a5950d0838570f31dc993cf83871.png" mode="widthFix"></image>
			<view class="text">欢迎来到龙之约拼车</view>
		</view>
		<view class="body">
			<view class="form">
				<view class="item">
					<view class="title">手机号</view>
					<view class="input"><u-input v-model="mobile" type="number" maxlength="11" placeholder="请输入手机号"></u-input></view>
				</view>
				<view class="item">
					<view class="title">验证码</view>
					<view class="input">
						<u-input v-model="captcha" type="number" maxlength="6" placeholder="请输入验证码"></u-input>
						<view class="code-btn">获取验证码</view>
					</view>
				</view>
				<view class="item">
					<view class="title">密码</view>
					<view class="input"><u-input v-model="password" type="password" placeholder="请输入密码"></u-input></view>
				</view>
			</view>
			<view class="n-btn-primary" @click="register">注册</view>
			<view class="login-text">
				已有账号？
				<navigator url="../login/login">去登录</navigator>
			</view>
			<view class="agreement">
				<label>
					<checkbox style="transform: scale(.6);" :value="isCheck" :checked="isCheck" />
					<view class="flex">
						阅读并同意
						<navigator url="../agreement/agreement?key=user_policy">《用户协议》</navigator>
						<navigator url="../agreement/agreement?key=privacy_policy">《隐私协议》</navigator>
					</view>
				</label>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			getUser: false, //手用户信息获取状态
			getPhone: false, //手机号获取状态
			userInfo: '', //用户信息
			openid: '', //openid
			mobile: '', //手机号
			captcha: '', //验证码
			password: '', 
			student_name: '',
			student_grade: '', 
			student_course: '', 
			pid: '', //邀请码
			isCheck: '1',
			gradeShow:false,
			gradeName:'',
			courseShow:false,
			courseName:false,
			gradeList:[],
			courseList:[],
		};
	},
	onShow() {
		if (uni.getStorageSync('pid')) {
			this.pid = uni.getStorageSync('pid');
		}
	},
	onLoad() {

	},
	methods: {
		...mapActions(['getUserInfo']),
		register(){
			console.log(this.isCheck)
			if(this.isCheck==0){
				this.$tools.toast('请阅读并同意协议')
				return
			}
			this.$api.register({
				mobile:this.mobile,
				password:this.password
			}).then(res=>{
				this.$tools.toast(res.msg)
				if(res.code==1){
					uni.setStorageSync('userInfo',res.data.userinfo)
					uni.setStorageSync('token',res.data.userinfo.token)
					setTimeout(()=>{
						uni.switchTab({
							url:'../index/index'
						})
					},800)
				}
			})
		},
		async getuserinfo() {
			// 获取用户信息
			// let userInfo = await this.$tools.mpGetUserProfile();
			let code = await this.$tools.mpGetCode();
			console.log(code);
			this.$api
				.login({
					code: code.code,
					pid: this.pid
				})
				.then(res => {
					if (res.code == 1) {
						this.openid = res.data.openid;
						this.userInfo = userInfo.userInfo;
						uni.setStorageSync('token', res.data.userinfo.token);
						this.getUser = true;
					}
				});
		},
		// getPhoneNumber(e) {
		// 	uni.login({
		// 		provider: 'weixin',
		// 		success: loginInfo => {
		// 			console.log(loginInfo, 'loginInfo');
		// 			this.$api
		// 				.getWechatMobile({
		// 					code: loginInfo.code,
		// 					iv: e.detail.iv,
		// 					encryptedData: e.detail.encryptedData
		// 				})
		// 				.then(res => {
		// 					console.log(res);
		// 					if (res.code == 1) {
		// 						this.mobile = res.data.phoneNumber;
		// 						this.getPhone = true;
		// 						this.login();
		// 					} else {
		// 						uni.showToast({
		// 							title: '获取失败，请重试',
		// 							icon: 'none'
		// 						});
		// 					}
		// 				});
		// 		}
		// 	});
		// },
		// login() {
		// 	console.log('登录');
		// 	this.$api
		// 		.updateUserInfo({
		// 			openid: this.openid,
		// 			username: this.userInfo.nickName,
		// 			avatar: this.userInfo.avatarUrl,
		// 			area: '',
		// 			birthday: ''
		// 			// pid:this.pid
		// 		})
		// 		.then(res => {
		// 			if (res.code == 1) {
		// 				this.$tools.toast('登录成功');
		// 				this.getUserInfo();
		// 				setTimeout(() => {
		// 					uni.reLaunch({
		// 						url: '../index/index'
		// 					});
		// 				}, 1000);
		// 			}
		// 		});
		// },
		goAgreement() {
			uni.navigateTo({
				url: './userAgreement/userAgreement'
			});
		}
	}
};
</script>

<style lang="scss">
	page{
		background: #f4f4f4;
	}
.header {
	background-size: cover;
	padding: 150upx 0 90upx;
	text-align: center;
	.avatar {
		width: 180upx;
	}
	.text {
		font-size: 42upx;
		color: $color-primary;
		letter-spacing: 10upx;
		margin-top: 30upx;
		line-height: 1;
	}
}
.body {
	background: #ffffff;
	border-radius: 40upx 40upx 0px 0px;
	margin-top: -40upx;
	padding: 50upx 45upx;
	.title-1 {
		font-size: 42upx;
		font-weight: bold;
		color: #333333;
		letter-spacing: 20upx;
		text-align: center;
	}
	.form {
		.item {
			margin-top: 60upx;
			.title {
				font-size: 30upx;
				font-weight: 500;
				color: #333333;
			}
			.input {
				margin-top: 10upx;
				@include flex;
				border-bottom: 2upx solid #efefef;
				flex: 1;
				.code-btn {
					font-size: 30upx;
					color: #2094e9;
					padding-left: 30upx;
					line-height: 32upx;
					height: 32upx;
					border-left: 2upx solid #2094e9;
				}
				/deep/ u-input{
					flex: 1;
				}
			}
		}
	}
	.select {
		.item {
			margin-top: 30upx;
			@include flex;
			.title {
				font-size: 30upx;
				color: #666666;
			}
			.option {
				flex: 1;
				font-size: 30upx;
				color: #999999;
				line-height: 72upx;
				background: #f7f7f7;
				border-radius: 36upx;
				padding: 0 40upx;
				margin-left: 50upx;
				@include flex-between;
			}
		}
	}
	.login-text {
		font-size: 30upx;
		color: #999999;
		margin-top: 30upx;
		line-height: 1;
		@include flex-end;
		navigator {
			color: #2094e9;
		}
	}
	.agreement{
		margin-top: 100upx;
		padding-bottom: 50upx;
		label{
			@include flex-center;
			font-size: 28upx;
			color: #999;
			navigator{
				color: #2094E9;
			}
		}
	}
}
.n-btn-primary{
	margin-top: 100upx;
}
</style>